<template>
  <div class="infinite-container">
    <div class="bgwhite login">

      <mu-flexbox>
        <mu-flexbox-item grow="1"></mu-flexbox-item>
        <mu-flexbox-item grow="18">
          <mu-text-field hintText="请输入手机号" v-model="phoneNumber" type="text" fullWidth></mu-text-field>
        </mu-flexbox-item>
        <mu-flexbox-item grow="1"></mu-flexbox-item>
      </mu-flexbox>
      <mu-divider/>

      <mu-flexbox>
        <mu-flexbox-item grow="1"></mu-flexbox-item>
        <mu-flexbox-item grow="11">
          <mu-text-field hintText="验证码" v-model="vcode" type="text" fullWidth></mu-text-field>
        </mu-flexbox-item>
        <mu-flexbox-item grow="7">
         <mu-raised-button :label="vcodeLabel" @click="getVcode" fullWidth primary :disabled="vcodeDisabled"></mu-raised-button>
        </mu-flexbox-item>
        <mu-flexbox-item grow="1"></mu-flexbox-item>
      </mu-flexbox>
      <mu-divider/>

    </div>

     <mu-flexbox :gutter="0" style="margin-top:4em;">
        <mu-flexbox-item grow="2"></mu-flexbox-item>
        <mu-flexbox-item grow="16">
         <mu-raised-button class="submit-btn" label="绑定并登陆" @click="bind" fullWidth primary></mu-raised-button>
        </mu-flexbox-item>
        <mu-flexbox-item grow="2"></mu-flexbox-item>
      </mu-flexbox>
      <p class="login-text">绑定即同意微信授权登陆</p> 
  </div>
</template>
<script>
import {commonAjax} from '../api/api'
import {testPhone, testVcode} from '../common/js/util.js'
// import md5 from 'md5'
const VCODE_LABEL_DEFALT = '获取验证码'
export default {
  data () {
    return {
      phoneNumber: '',
      vcode: '',
      vcodeLabel: VCODE_LABEL_DEFALT,
      vcodeDisabled: false
    }
  },
  methods: {
    getSelf () {
      if (!localStorage.openId) {
        return
      }
      this.$store.commit('UPDATE_LOADING')
      commonAjax('user/getSelf', {openid: localStorage.openId}).then(res => {
        this.$store.commit('UPDATE_LOADING')
        if (res.data.code === 1) {
          // if this is a new user
          // res.data.data should be null
          let data = res.data.data
          if (data === null) {
            // todo: bind new user
          } else {
            localStorage.accessToken = data.token
            localStorage.person = JSON.stringify(data)
            setTimeout(() => this.$router.push('/setting'), 100)
          }
        }
      })
    },
    bind () {
      if (!this.phoneNumber || !this.vcode) {
        return false
      }
      if (!testPhone(this.phoneNumber) || !testVcode(this.vcode)) {
        this.$store.commit('UPDATE_TOAST', {message: '手机号或密码有误'})
        return false
      }
      let params = {
        mobile: this.phoneNumber,
        code: this.vcode,
        openId: localStorage.openId
      }
      commonAjax('user/bind', params).then(res => {
        if (res.data.code === 1) {
          // todo: bind success or already bind
          this.$store.commit('UPDATE_TOAST', {
            message: '绑定成功',
            fn: () => this.$router.push('/setting')
          })
        }
      })
    },
    getVcode () {
      if (testPhone(this.phoneNumber)) {
        this.vcodeDisabled = true
        commonAjax(`util/bindcaptcha?mobile=${this.phoneNumber}`).then(res => {
          if (res.data.code === 1) {
            this.$store.commit('UPDATE_TOAST', {message: '验证码发送成功'})
            this.timeout()
          } else {
            this.vcodeDisabled = false
            this.$store.commit('UPDATE_TOAST', {message: res.data.msg})
          }
        })
      } else {
        this.$store.commit('UPDATE_TOAST', {message: '请输入有效的手机号'})
      }
    },
    timeout () {
      let start = 60
      let countDown = () => {
        this.vcodeTimer = setTimeout(() => {
          this.vcodeLabel = (start--) + 's'
          countDown()
          if (start <= 0) {
            this.vcodeDisabled = false
            this.vcodeLabel = VCODE_LABEL_DEFALT
            clearTimeout(this.vcodeTimer)
          }
        }, 1000)
      }
      countDown()
    }
  },
  mounted () {
    this.getSelf()
  },
  beforeDestroy () {
  }
}
</script>

<style lang="less">
@import '../common/css/vars.less';
.login-text {
  color: #999;
  text-align:center;
}
</style>
